<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="themes/default/layout/account">
<head>
    <title>用户注册 - <th:block th:text="${GlobalSetting.website.name}"/></title>
</head>
<div  layout:fragment="content">
    <div class="header text-center">
        <h1>
            <a th:href="${GlobalSetting.website.url}" class="logo">
                <img th:src="@{/css/default/logo_color.png}" th:alt="${GlobalSetting.website.name}">
            </a>
        </h1>
        <p class="description text-muted" th:text="${GlobalSetting.register.title}?_">欢迎加入一起smart问答社区</p>
    </div>
    <div class="col-md-6 col-md-offset-3 bg-white login-wrap">
        <h1 class="h4 text-center text-muted login-title">创建新账号</h1>
        <form th:object="${user}" role="form" id="registerForm" th:action="${#request.getRequestURI()}" method="post">
            <div class="form-group" th:classappend="${#fields.hasErrors('username') || error?.field=='username'}?'has-error'">
                <label class="required">用户名</label>
                <input type="text" class="form-control" name="username" th:value="${user.username}" required  placeholder="用户名">
                <span th:if="${#fields.hasErrors('username')}" class="help-block" th:text="${#fields.errors('username')[0]}"></span>
                <span th:if="${error?.field=='username'}" class="help-block" th:text="${error.message}"></span>
            </div>
            <div class="form-group" th:classappend="${#fields.hasErrors('email') || error?.field=='email'}?'has-error'">
                <label class="required">Email</label>
                <input type="email" class="form-control" name="email" th:value="${user.email}" required placeholder="hello@iqismart.com">
                <span th:if="${#fields.hasErrors('email')}" th:text="${#fields.errors('email')}" class="help-block"></span>
                <span th:if="${error?.field=='email'}" th:text="${error.message}" class="help-block"></span>
            </div>
            <div class="form-group" th:classappend="${#fields.hasErrors('password')||error?.field=='password'}?'has-error'">
                <label class="required">密码</label>
                <input type="password" class="form-control" name="password" required placeholder="不少于 6 位" th:value="${user.password}">
                <span th:if="${#fields.hasErrors('password')}" th:text="${#fields.errors('password')[0]}" class="help-block"></span>
                <span th:if="${error?.field=='email'}" th:text="${error.message}" class="help-block"></span>
            </div>
            <div class="form-group" th:classappend="${#fields.hasErrors('passwordConfirmation') || error?.field=='passwordConfirmation'}?'has-error'">
                <label class="required" >确认密码</label>
                <input type="password" class="form-control" name="passwordConfirmation" required placeholder="不少于 6 位" th:value="${user.passwordConfirmation}">
                <span th:if="${#fields.hasErrors('passwordConfirmation')}" th:text="${#fields.errors('passwordConfirmation')[0]}" class="help-block"></span>
                <span th:if="${error?.field=='passwordConfirmation'}" th:text="${error?.message}" class="help-block"></span>
            </div>
            <div th:if="${GlobalSetting.irrigation.codeRegister}" class="form-group" th:classappend="${error?.field=='code'}?'has-error'">
                <label for="captcha" class="required">验证码</label>
                <input type="text" class="form-control" id="captcha" name="captcha" required="" placeholder="请输入下方的验证码">
                <span th:if="${error?.field=='code'}" th:text="${error?.message}" class="help-block"></span>
                <div class="mt-10"><a href="javascript:void(0);" id="reloadCaptcha"><img src="/code/image?width=60&height=20"></a></div>
            </div>
            <div class="form-group">
                同意并接受 <a href="#" target="_blank" data-toggle="modal" data-target="#register_license_modal">《服务条款》</a>
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-primary btn-block btn-lg">注册</button>
            </div>
        </form>
    </div>


    <div class="text-center col-md-12 login-link">
        <a th:href="@{/account/login}">用户登录</a>
        |
        <a th:href="${GlobalSetting.website.url}">首页</a>
        |
        <a th:href="@{/account/forgetPassword}">找回密码</a>
    </div>
    <div class="modal fade " id="register_license_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title text-center"><th:block th:text="${GlobalSetting.website.name}"/>服务条款</h4>
                </div>
                <div class="modal-body">
                    <div style="height: 450px;overflow:scroll;">
                        <th:block th:utext="${GlobalSetting.register.license}"></th:block>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
</div>